import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter => 创建VueRouter实例的一个方法
// createWebHistory => 创建history模式的路由
// createWebHashHistory => 创建hash模式的路由

import routes from './routes'


const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(import.meta.env.BASE_URL),

  // 路由配置数组
  routes: routes,
})


/* 
    路由(导航)守卫:
       vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

    全局守卫  => 所有导航跳转/刷新
      1. 全局前置守卫
      router.beforeEach(function(to,from,next){

      })


      2. 全局解析守卫  
        a. 用法同全局前置守卫
        b. 就时间段而言,发生全局前置守卫守卫之后, 导航跳转之前 => 是导航跳转前的最后一道守卫
      router.beforeResolve(function(to,from,next){

      })

      3. 全局后置守卫
        a. 此钩子函数触发时,导航已经确定要跳转 => 一般用于做前端埋点处理 
          所谓'埋点'是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。  =>
            数据监控（用户行为）
				pv，uv
				记录操作系统
				用户在每一个页面的停留时间(离开页面，进入页面)
				用户进入的入口
				用户在相应页面的触发行为，点击按钮
            性能监控 (js中的performance)
				用户的首屏加载
				http请求响应时间
				页面渲染时间
				页面交互动画完成时间
				关键代码 

      router.afterEach(function(to,from){
       
      })


	路由独享守卫: 
	  	a. 一般在路由配置项中设置 beforeEnter
		b. 从其他路由跳转指定路由时触发

		{
			path: '/detail',
			name: 'detail',
			// component: DetailView,
			meta: { label: "详情", requiresAuth: true },
			components: {
				header: HeaderView,
				default: DetailView,
				// footer:FooterView,
			},
			beforeEnter:function(to,from,next){
				console.log("路由独享守卫");
				console.log("to", to);
				console.log("from", from);
				next();
			}
    	},

	  	注意: beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发


	组件内守卫:
		a. 一般在组件内的配置项上设置 



		beforeRouterEnter   组件被渲染之前执行, 可以在组件内配置,通过在组件内显示用户是否可以进行导航跳转
			// 在渲染该组件的对应路由被验证前调用
			// 不能获取组件实例 `this` ！
			// 因为当守卫执行时，组件实例还没被创建！


*/

/* router.beforeEach(function (to, from, next) {
  console.log("全局前置守卫");
  console.log("to", to);
  console.log("from", from);
  next();
})

router.beforeResolve(function (to, from, next) {
  console.log("全局解析守卫");
  console.log("to", to);
  console.log("from", from);
  next();
})

router.afterEach(function (to, from) {
  console.log("全局后置守卫");
  console.log("to", to);
  console.log("from", from);
}) */



export default router
